<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	
	    <base href="<%=basePath%>">
	    <title>index Page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/index.css" />
		<script type="text/javascript" src="<%=basePath%>/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<script type="text/javascript" src="<%=basePath%>/echarts/echarts.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>/echarts/theme.js"></script>
		<style>
			.overallRiskAssessment {
				margin:20px auto;
				background-color:#FFF; 
				border-collapse: collapse; 
				border: none; 
				font-size:16px; 
				text-align:center;
			}
			.overallRiskAssessment td {
				border: solid #FFF 1px; 
				font-size:16px; 
				padding : 15 15 15 20;
			}
			.overallRiskAssessment_td1 {
				background-color: rgba(91,155,213,1);
				color:rgba(253,254,255,1);
				margin-right:2px;
				font-size:16px; 
			}
			.overallRiskAssessment_td2 {
				background-color: rgba(210,222,239,1);
				font-size:16px; 
			}
			.overallRiskAssessment_td3 {
				background-color: rgba(234,239,247,1);
				font-size:16px; 
			}
		</style>
	</head>
	<body>
		
		<div id="user_tool" style="padding:5px;">
			<div style="padding:0 0 0 7px;color:#333;">
				<form id="search" >
					<p>
						查询城市：<input class="easyui-combobox" id="cityId" name="cityId" style="width:110px;">
						查询酒店：<input class="easyui-combobox" id="hotelId" name="hotelId" style="width:110px;">
						<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="user_tool.search();">查询</a>
					</p>
				</form>
			</div>
			<div style="margin:20 5 5 5">
				<div id="chart0" style="float:left;width:49%;height:300px; margin:100 5 5 5;border-style:ridge;">
					<table class="overallRiskAssessment" border="0" style="width:90%;" cellpadding="0" cellspacing="2" >
           				<tr>
	           				<td class="overallRiskAssessment_td1">今日成功下单数</td>
	           				<td class="overallRiskAssessment_td1">${success}</td>
           				</tr>
           				<tr>
	           				<td class="overallRiskAssessment_td2">今日失败下单数</td>
	           				<td class="overallRiskAssessment_td2">${fail}</td>
           				</tr>
          				<tr>
          					<td class="overallRiskAssessment_td3">今日下单金额</td>
          					<td class="overallRiskAssessment_td3">${price}</td>
          				</tr>
          		 	</table>
				
				</div>
				<div id="chart1" style="float:right;width:49%;height:300px;border-style:ridge;"></div>
			</div>
			
			<div  style="margin:20 5 5 5;">
				<div id="chart4" style="width:100%;height:300px;float:left;border-style:ridge;"></div>
			</div>
			
			<div style="margin:20 5 5 5">
				<div id="chart6" style="width:49%;height:300px; float:left;border-style:ridge;"></div>
				<div id="chart7" style="width:49%;height:300px;float:right;border-style:ridge;"></div>
			</div>
		</div>
		<script type="text/javascript">
		 $(function () {
		 	    $('#cityId').combobox({
				url: "orderAction!getCityName?date="+new Date()+"",
				lines : true,
			    editable:true, 
			    valueField:'cityName',     
			    textField:'cityName',  
			    panelHeight:'auto',
			    onChange:function(newValue, oldValue){
			    	if(newValue != null){
			    		$("#hotelId").combobox("setValue",'');
		        		$.ajax({
							url : 'hotelAction!getHotelByCityName',
							type : 'post',
							data : {
								q : newValue,
							},
							dataType : "json", 
							success : function (data) {
								$("#hotelId").combobox("loadData",data); 
							}
						});
		          	}
			    },
		    });      
		    
		    $('#hotelId').combobox({   
		        editable:true, //不可编辑状态  
		        cache: false,  
		        panelHeight:'auto',
		        valueField:'hotelId',     
		        textField:'hotelName'  
		    }); 
		    
		    var cityId = '${cityId}';
	   		var hotelId = ${hotelId};
	    	$('#cityId').combobox('setValue',cityId);
	    	$('#hotelId').combobox('setValue',hotelId);
			var theme = new Theme();
	   		echarts.registerTheme("macarons", theme.getTheme("macarons"));
	   		var data = ${data};
	   		var obj = eval(data);
	        
	        var myChart1 = echarts.init(document.getElementById('chart1'));
	        var option1 = {
			    title : {
			        text: '昨日下单情况',
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'right',
			        data: ['成功下单','失败下单']
			    },
			    series : [
			        {
			            name: '下单情况',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:obj.chart1.series
			        }
			    ]
			};
	        myChart1.setOption(option1);
	        
	       var myChart4 = echarts.init(document.getElementById('chart4'),"macarons");
	       var option4 = {
			    title: {
			        text: '2016年月份下单比对图'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['成功下单','失败下单']
			    },
			    dataZoom : {
			        show : true,
			        realtime : true,
			        start : 10,
			        end : 90
				},
			    toolbox: {
			    	right : 50,
			        feature: {
			            mark : {show: true},
			       	    dataView : {show: true, readOnly: false},
			       	    magicType : {show: true, type: ['line', 'bar']},
			       	    restore : {show: true},
			       	    saveAsImage : {show: true}
			        }
			    },
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
			            data : obj.chart4.xAxis
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
						minInterval: 1,
						boundaryGap : [0,0.01]
			        }
			    ],
			    series : [
			        {
			            name:'成功下单',
			            type:'line',
			            data:obj.chart4.series0
			        },
			        {
			            name:'失败下单',
			            type:'line',
			            data:obj.chart4.series1
			        }
			    ]
			};
	        myChart4.setOption(option4);
	        
	        
	        var myChart6 = echarts.init(document.getElementById('chart6'),"macarons");
	        var option6 = {
			    title: {
			        text: '2015年月份下单一览图'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['下单数量']
			    },
			     dataZoom : {
			        show : true,
			        realtime : true,
			        start : 10,
			        end : 90
				},
			    toolbox: {
			        feature: {
			            mark : {show: true},
	       	            dataView : {show: true, readOnly: false},
	       	            magicType : {show: true, type: ['line', 'bar']},
	       	            restore : {show: true},
	       	            saveAsImage : {show: true}
			        }
			    },
			    grid: {
			        containLabel: true
			    },
			    xAxis : [
			        {
			          type : 'category',
					  boundaryGap : true,
					  data : obj.chart6.xAxis
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
						minInterval: 1,
						boundaryGap : [0,0.01]
			        }
			    ],
			    series : [
			        {
			            name:'订单销量',
			            type:'line',
			            data : obj.chart6.series
			        }
			    ]
			};
	        myChart6.setOption(option6);
	        
	        var myChart7 = echarts.init(document.getElementById('chart7'),"macarons");
	        var option7 = {
	            title: {
	                text: '2015年月份销售金额一览图'
	            },
	            xAxis: {
	            	type : 'category',
	           		boundaryGap : true,
	                data: obj.chart7.xAxis
	            },
	            yAxis: {
	           		type : 'value',
					minInterval: 1,
					boundaryGap : [0,0.01]
	            },
	            series: [{
	                name: '销售金额',
	                type: 'bar',
	                data: obj.chart7.series
	            }]
	    };
	    myChart7.setOption(option7);
	    

			 user_tool = {
				  search : function (){
				    	var cityId = $('#cityId').combobox('getValue');
				    	var hotelId = $('#hotelId').combobox('getValue');
				    	window.location.href = '<%=path%>/orderAction?cityId='
				    		+ cityId + '&hotelId=' + hotelId;
				   }
			 }
    });
    </script>
	</body>
</html>